<div class="hbox hbox-auto-xs hbox-auto-sm" ng-init="
    app.settings.asideFolded = false; 
    app.settings.asideDock = false;
  ">
  <!-- main -->
  <div class="col">
    <!-- main header -->
    <div class="bg-light lter b-b wrapper-md">
      <div class="row">
        <div class="col-sm-6 col-xs-12">
          <h1 class="m-n font-thin h3 text-black">IP</h1>
          <small class="text-muted">维护IP</small>
        </div>
      </div>
    </div>
    <!-- / main header -->
    <div class="wrapper-md" ng-controller="ipCtrl">
        <!-- toaster directive -->
        <toaster-container toaster-options="{'position-class': 'toast-top-right', 'close-button':true}"></toaster-container>
        <!-- / toaster directive -->
        <form class="form-inline" role="form">
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">IP</span>
                    <input type="text" class="form-control" ng-model="ip" placeholder="IP">
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">IP段</span>
                    <ui-select ng-model="nowIPGroup.selected" theme="bootstrap">
                        <ui-select-match placeholder="搜索IP组名称......">{{$select.selected.ipNetwork}}</ui-select-match>
                        <ui-select-choices refresh="queryIPGroup($select.search)" refresh-dalay="0" repeat="item in ipGroupList | filter: $select.search">
                            <div ng-bind-html="item.ipNetwork | highlight: $select.search"></div>
                        </ui-select-choices>
                    </ui-select>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">IP类型</span>
                    <select class="form-control" ng-model="nowIpType" ng-options="type.code as type.name for type in ipType">
                        <option value="">---请选择---</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <div class="input-group">
                    <span class="input-group-addon">使用状态</span>
                    <select class="form-control" ng-model="nowUseType" ng-options="type.code as type.name for type in useType">
                        <option value="">---请选择---</option>
                    </select>
                </div>
            </div>
            <div class="form-group">
                <button type="button" class="btn btn-info" ng-click="doQuery()"><span class="glyphicon glyphicon-search"></span>搜索</button>
                <button type="button" class="btn btn-info" ng-click="reSet()"><span class="glyphicon glyphicon-repeat"></span>重置</button>
                <button type="button" class="btn btn-success" ng-click="addIP()" ng-if="contains(authPoint, '/ip/save')"><span class="glyphicon glyphicon-plus"></span>新增</button>
            </div>
        </form>
        <div class="panel panel-default" style="margin-top: 5px;;">
            <div class="panel-body">
                <table class="table table-hover table-bordered table-striped">
                    <thead>
                    <tr>
                        <td>IP段</td>
                        <td>IP</td>
                        <td>使用状态</td>
                        <td>添加时间</td>
                        <td ng-if="contains(authPoint, '/ip/save') || contains(authPoint, '/ip/del')">操作</td>
                    </tr>
                    </thead>
                    <tbody>
                    <tr ng-repeat="item in pageData">
                        <td>{{item.ipNetworkDO.ipNetwork}}</td>
                        <td>{{item.ip}}
                            <b class="pull-right" style="color: #449d44" ng-if="item.ipType == 0">公网</b>
                            <b class="pull-right" style="color: #777" ng-if="item.ipType == 1">内网</b>
                        </td>
                        <td>
                            <b style="color: #449d44" ng-if="item.serverId == 0">未使用</b>
                            <b style="color: #286090" ng-if="item.serverId != 0">{{item.serverName}}</b>
                        </td>
                        <td>{{item.gmtCreate}}</td>
                        <td ng-if="contains(authPoint, '/ip/save') || contains(authPoint, '/ip/del')">

                            <button ng-click="editIP(item)"
                                    ng-if="contains(authPoint, '/ip/save')"
                                    class="btn btn-xs"
                                    style="margin-left: 5px; background-color: #2e6da4; color: white;">
                                <span class="glyphicon glyphicon-edit"></span>编辑</button>
                            <!---->
                            <!--<span class="glyphicon glyphicon-pencil" ng-click="editIP(item)"-->
                                    <!--ng-if="contains(authPoint, '/ip/save')"></span>-->

                            <button ng-click="delIP(item.id)" ng-if="contains(authPoint, '/ip/del')"
                                    class="btn btn-xs pull-right"
                                    style="background-color: red; color: white;">
                                <span class="glyphicon glyphicon-remove"></span>删除</button>
                        </td>
                    </tr>
                    </tbody>
                    <tfoot>
                    <tr>
                        <td colspan="6">
                            <ul style="margin: 0px; float: right;" uib-pagination total-items="totalItems" ng-model="currentPage" items-per-page="pageLength" max-size="10" ng-change="pageChanged()" previous-text="&lsaquo;" next-text="&rsaquo;"></ul>
                        </td>
                    </tr>
                    </tfoot>
                </table>
            </div>
        </div>
    </div>
  </div>
  <!-- / main -->
</div>

<script type="text/ng-template" id="ipModal">
    <div ng-include="'tpl/modal/ip_modal.html'"></div>
</script>